<template>
    <div>
      <div class="top">
          <div class="top_left">
            <span class="textA">直流电源</span>/<span class="textB">拓扑展示</span>
          </div>
          <div class="top_right">
            <div class="box_A">A路</div>
            <div class="box_B">B路</div>
          </div>
      </div>
      <div id="scroll-container" style="position: relative;">
        <div class="bottom" ref="stageContainer"></div>
      </div>
    </div>
    
  
  </template>
  <script>
    import Konva from 'konva';
    import {getPowerinfor} from "@/api/index"
    export default {
      data() {
        return {
          isDragging: false, // 用于标记是否正在拖动
          lastPointerPos: null, // 记录上一次鼠标指针的位置
          Alist:{},
          Blist:{},
          // Alist:{id:11,state:"开启",branch:[
          //   {id: 1, deviceId: "001-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
          //   {id: 2, deviceId: "001-2", deviceName: "汇聚分支2", deviceType: "汇聚分支",status:"故障",apower:102,avoltage:"220v",acurrent:"0.2A",},
          //   {id: 3, deviceId: "001-3", deviceName: "汇聚分支3", deviceType: "汇聚分支",status:"在线",apower:103,avoltage:"220v",acurrent:"0.2A",},
          //   {id: 4, deviceId: "001-4", deviceName: "汇聚分支4", deviceType: "汇聚分支",status:"在线",apower:104,avoltage:"220v",acurrent:"0.2A",},
          //   {id: 5, deviceId: "001-5", deviceName: "汇聚分支5", deviceType: "汇聚分支",status:"离线",apower:106,avoltage:"220v",acurrent:"0.2A",},
          //   {id: 1, deviceId: "001-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:106,avoltage:"220v",acurrent:"0.2A",},
          //   {id: 2, deviceId: "001-2", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"故障",apower:106,avoltage:"220v",acurrent:"0.2A",},
          //   {id: 3, deviceId: "001-3", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:106,avoltage:"220v",acurrent:"0.2A",},
          //   {id: 4, deviceId: "001-4", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:106,avoltage:"220v",acurrent:"0.2A",},
          //   {id: 5, deviceId: "001-5", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"离线",apower:106,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 1, deviceId: "001-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:106,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 2, deviceId: "001-2", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"故障",apower:106,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 3, deviceId: "001-3", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:106,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 4, deviceId: "001-4", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:106,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 5, deviceId: "001-5", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"离线",apower:106,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 1, deviceId: "001-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 2, deviceId: "001-2", deviceName: "汇聚分支2", deviceType: "汇聚分支",status:"故障",apower:102,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 3, deviceId: "001-3", deviceName: "汇聚分支3", deviceType: "汇聚分支",status:"在线",apower:103,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 4, deviceId: "001-4", deviceName: "汇聚分支4", deviceType: "汇聚分支",status:"在线",apower:104,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 5, deviceId: "001-5", deviceName: "汇聚分支5", deviceType: "汇聚分支",status:"离线",apower:106,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 1, deviceId: "001-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 2, deviceId: "001-2", deviceName: "汇聚分支2", deviceType: "汇聚分支",status:"故障",apower:102,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 3, deviceId: "001-3", deviceName: "汇聚分支3", deviceType: "汇聚分支",status:"在线",apower:103,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 4, deviceId: "001-4", deviceName: "汇聚分支4", deviceType: "汇聚分支",status:"在线",apower:104,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 5, deviceId: "001-5", deviceName: "汇聚分支5", deviceType: "汇聚分支",status:"离线",apower:106,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 1, deviceId: "001-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 2, deviceId: "001-2", deviceName: "汇聚分支2", deviceType: "汇聚分支",status:"故障",apower:102,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 3, deviceId: "001-3", deviceName: "汇聚分支3", deviceType: "汇聚分支",status:"在线",apower:103,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 4, deviceId: "001-4", deviceName: "汇聚分支4", deviceType: "汇聚分支",status:"在线",apower:104,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 5, deviceId: "001-5", deviceName: "汇聚分支5", deviceType: "汇聚分支",status:"离线",apower:106,avoltage:"220v",acurrent:"0.2A",},
          // ]},
          // Blist:{id:22,state:"开启",branch:[
          //   {id: 8, deviceId: "002-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:111,avoltage:"220v",acurrent:"0.2A",},
          //   {id: 9, deviceId: "002-2", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:112,avoltage:"220v",acurrent:"0.2A",},
          //   {id: 10, deviceId: "002-3", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:113,avoltage:"220v",acurrent:"0.2A",},
          //   {id: 11, deviceId: "002-4", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:114,avoltage:"220v",acurrent:"0.2A",},
          //   {id: 12, deviceId: "002-5", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:115,avoltage:"220v",acurrent:"0.2A",},
          //   {id: 8, deviceId: "002-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
          //   {id: 9, deviceId: "002-2", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
          //   {id: 10, deviceId: "002-3", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
          //   {id: 11, deviceId: "002-4", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
          //   {id: 12, deviceId: "002-5", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 8, deviceId: "002-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 9, deviceId: "002-2", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 10, deviceId: "002-3", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 11, deviceId: "002-4", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 12, deviceId: "002-5", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 8, deviceId: "002-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 9, deviceId: "002-2", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 10, deviceId: "002-3", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 11, deviceId: "002-4", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 12, deviceId: "002-5", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 1, deviceId: "001-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 2, deviceId: "001-2", deviceName: "汇聚分支2", deviceType: "汇聚分支",status:"故障",apower:102,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 3, deviceId: "001-3", deviceName: "汇聚分支3", deviceType: "汇聚分支",status:"在线",apower:103,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 4, deviceId: "001-4", deviceName: "汇聚分支4", deviceType: "汇聚分支",status:"在线",apower:104,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 5, deviceId: "001-5", deviceName: "汇聚分支5", deviceType: "汇聚分支",status:"离线",apower:106,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 1, deviceId: "001-1", deviceName: "汇聚分支1", deviceType: "汇聚分支",status:"在线",apower:101,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 2, deviceId: "001-2", deviceName: "汇聚分支2", deviceType: "汇聚分支",status:"故障",apower:102,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 3, deviceId: "001-3", deviceName: "汇聚分支3", deviceType: "汇聚分支",status:"在线",apower:103,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 4, deviceId: "001-4", deviceName: "汇聚分支4", deviceType: "汇聚分支",status:"在线",apower:104,avoltage:"220v",acurrent:"0.2A",},
          //   // {id: 5, deviceId: "001-5", deviceName: "汇聚分支5", deviceType: "汇聚分支",status:"离线",apower:106,avoltage:"220v",acurrent:"0.2A",},
          // ]},
          scaleAgroup:0,
          halfHeightA:0,    //半高
          halfHeightB:0,    //半高
        }
      },
      mounted(){
        this.initStage();
        this.getData();
      },
      methods:{
        initStage() {
          this.stage = new Konva.Stage({
            container: this.$refs.stageContainer,
            width: window.innerWidth,
            height: window.innerHeight,
          });
          this.stage.draw();
        },
        getData(){
          getPowerinfor().then(resp => {
            this.Alist = resp.data.A;
            this.Blist = resp.data.B;
            this.$nextTick(() => {
              this.stage = new Konva.Stage({
                container: this.$refs.stageContainer,
                width: this.$refs.stageContainer.offsetWidth,
                height: this.$refs.stageContainer.offsetHeight,
                draggable: false
              });
              const layer = new Konva.Layer();
                // 创建一个主 Group 来管理所有元素
                const mainGroup = new Konva.Group();
                // 提取创建矩形和文本的函数
                const createRectAndText = (x, y, width, height, fill,textLeft, textRight, name) => {
                  const rect = new Konva.Rect({
                    x,
                    y,
                    width,
                    height,
                    fill,
                    stroke: 'black',
                    strokeWidth: 2,
                    name,
                  });
                  const textLeftObj = new Konva.Text({
                    x: x + 5,
                    y: y + 5,
                    text: textLeft,
                    fontSize: 12,
                    fontFamily: 'Arial',
                    fill: 'black',
                    align: 'left',
                    textAlign: 'left',
                  });
                  const textRightObj = new Konva.Text({
                    x: x + width - 20,
                    y: y + height - 15,
                    text: textRight,
                    fontSize: 12,
                    fontFamily: 'Arial',
                    fill: 'black',
                    align: 'right',
                    textAlign: 'right',
                  });
                  //创建斜线
                  const line = new Konva.Line({
                    points: [x + width, y, x, y + height],
                    stroke: 'black',
                    strokeWidth: 2,
                  });
                  layer.add(rect);
                  layer.add(textLeftObj);
                  layer.add(textRightObj);
                  layer.add(line);
                  // 创建一个组来管理矩形和文本
                  const group = new Konva.Group();
                  group.add(rect);
                  group.add(textLeftObj);
                  group.add(textRightObj);
                  group.add(line);
                  // 添加点击事件监听器
                  rect.on('click', () => {
                    // this.handleDialog(name);
                  });
                  // return { rect, textObj };
                  // layer.add(group);
                  mainGroup.add(group);
                  return group;
                };
                // 提取创建虚线矩形和文本的函数
                const createDashedRectAndText = (x, y, width, height, text, name) => {
                  const rect = new Konva.Rect({
                    x,
                    y,
                    width,
                    height,
                    stroke: 'black',
                    strokeWidth: 2,
                    dash: [5, 3],
                    fill: 'transparent',
                    name,
                    draggable:true
                  });
                  const textObj = new Konva.Text({
                    x: x + 20,
                    y: y - 20,
                    text,
                    fontSize: 14,
                    fontFamily: 'Arial',
                    fill: 'black',
                    align: 'left'
                  });
                  // 创建一个组来管理虚线矩形和文本
                  const group = new Konva.Group();
                  group.add(rect);
                  group.add(textObj);
                  // layer.add(group);
                  mainGroup.add(group);
                  return group;
                };
                // 创建箭头函数
                const createArrow = (x, y, length, color, name) => {
                  const arrow = new Konva.Arrow({
                    points: [x, y, x, y + length],
                    pointerLength: 10,
                    pointerWidth: 10,
                    fill: color,
                    stroke: color,
                    strokeWidth: 2,
                    name
                  });
                  // layer.add(arrow);
                  return arrow;
                };
                // 创建实心圆函数
                const createCircle = (x, y, radius, fill, name) => {
                  const circle = new Konva.Circle({
                    x,
                    y,
                    radius,
                    fill,
                    stroke: 'black',
                    strokeWidth: 2,
                    name
                  });
                  // layer.add(circle);
                  return circle;
                };
                // 创建贯穿线函数
                const createLine = (x1, y1, x2, y2, stroke, strokeWidth, name) => {
                  const line = new Konva.Line({
                    points: [x1, y1, x2, y2],
                    stroke,
                    strokeWidth,
                    name
                  });
                  // layer.add(line);
                  return line;
                };
                const xSpacing = 60;
                const yStart = 40;
                const dcScreenCabinetWidth = 300; // 直流屏柜宽度
                const dcPowerCabinetWidth = 180; // 直流配电柜宽度
                const dcPowerCabinetHeight = 150; // 直流配电柜高度
                const dcScreenCabinetHeight = 100; // 直流屏柜高度
                const dcPowerACDCWidth = 130; //单独AC/DC配置
                const dcPowerACDCHeight = 90;
                const subComponentWidth = 35; // 子组件宽度
                const subComponentHeight = 35; // 子组件高度
                const subComponentSpacing = 20; // 子组件间隔
                // 进电线的位置和尺寸
                const inletWireWidth = 20;
                const inletWireHeight = 90;
                if (this.Alist) {
                  // 创建 A 路相关元素的组
                  const aGroup = new Konva.Group();
                  // 绘制进电线 A 路
                  const inletWireCircleA = createCircle(
                    xSpacing / 2,
                    yStart + (dcPowerCabinetHeight - inletWireHeight) / 2,
                    inletWireWidth / 2,
                    'green',
                    'inletWireCircleA'
                  );
                  aGroup.add(inletWireCircleA);
                  const inletWireA = createArrow(
                    xSpacing / 2,
                    yStart + (dcPowerCabinetHeight - inletWireHeight) / 2 + inletWireWidth / 2,
                    inletWireHeight - inletWireWidth,
                    'green',
                    'inletWireA'
                  );
                  aGroup.add(inletWireA);
                  // A路与箭头垂直的线
                  // const verticalLineA = createLine(
                  //   xSpacing / 2,
                  //   yStart + dcPowerCabinetHeight - inletWireHeight / 2,
                  //   xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 3,
                  //   yStart + dcPowerCabinetHeight - inletWireHeight / 2,
                  //   'green',
                  //   3,
                  //   'verticalLineA'
                  // );
                  const verticalLineA_1 = createLine(
                    xSpacing / 2,
                    yStart + dcPowerCabinetHeight - inletWireHeight / 2,
                    xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 2,
                    yStart + dcPowerCabinetHeight - inletWireHeight / 2,
                    'green',
                    3,
                    'verticalLineA'
                  );
                  // 后半段线，宽度设置为1
                  const verticalLineA_2 = createLine(
                    xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 2,
                    yStart + dcPowerCabinetHeight - inletWireHeight / 2,
                    // 这里需要根据实际情况修改终点坐标，假设终点横坐标再增加100
                    xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 3, 
                    yStart + dcPowerCabinetHeight - inletWireHeight / 2,
                    'green',
                    1,
                    'verticalLineA_2'
                  );
                  const cGroup = new Konva.Group();
                  // aGroup.add(verticalLineA);
                  cGroup.add(verticalLineA_1);
                  cGroup.add(verticalLineA_2)
                  // A路总开关
                  const imageMainswitch = new Image();
                  imageMainswitch.onload = () => {
                    // 图片加载完成后，更新 imagezongkai 变量
                    this.imagezongkai = imageMainswitch;
                    const aMainSwitchImage = new Konva.Image({
                      x: xSpacing + subComponentSpacing,
                      y: yStart+ subComponentSpacing + subComponentHeight*2-15,
                      image: this.imagezongkai, // 使用加载完成的图片对象
                      width: subComponentWidth*2,
                      height: subComponentHeight*2,
                      name: 'aMainSwitchImage',
                      // rotation:-90,
                      // draggable:true
                      // scaleX: -1  // 水平翻转
                    });
                    // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                    const whiteCover = new Konva.Rect({
                      x: xSpacing + subComponentSpacing,
                      y: yStart + subComponentSpacing + subComponentHeight * 2 - 15,
                      width: subComponentWidth * 2,
                      height: subComponentHeight * 2,
                      fill: 'white'
                    });
                    // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                    aGroup.add(whiteCover);
                    aGroup.add(aMainSwitchImage);
                    // 重新绘制 layer 和 stage
                    layer.draw();
                    this.stage.draw();
                  };
                  imageMainswitch.src = require("@/assets/openswitch.png");
                  // 创建一个 Konva.Text 对象来显示开关名称
                  const switchNameText = new Konva.Text({
                    x: xSpacing + subComponentSpacing,
                    y: yStart + subComponentSpacing + subComponentHeight * 2 - 25, // 在开关上方显示
                    text: '100A/3P',
                    fontSize: 12,
                    fontFamily: 'Arial',
                    fill: 'black'
                  });
                  aGroup.add(switchNameText);
                  //A路AC/DC
                  const aRectifierModule = createRectAndText(
                    xSpacing + subComponentSpacing*5 + subComponentWidth*2,
                    yStart + dcPowerCabinetHeight - dcScreenCabinetHeight + subComponentSpacing,
                    // dcPowerCabinetWidth,
                    // dcScreenCabinetHeight,
                    dcPowerACDCWidth,
                    dcPowerACDCHeight,
                    'white',
                    'AC',
                    'DC',
                    'aRectifierModule'
                  );
                  aGroup.add(aRectifierModule);
                  // 创建一个 Konva.Text 对象来显示名称
                  const rectifierModuleName = new Konva.Text({
                    x: xSpacing + subComponentSpacing * 5 + subComponentWidth*2, // 与 aRectifierModule 相同的 x 坐标
                    y: yStart + dcPowerCabinetHeight - dcScreenCabinetHeight + subComponentSpacing - 20, // 在 aRectifierModule 上方适当位置
                    text: '48/600A直流电源', // 这里替换为你想要显示的实际名称
                    fontSize: 12,
                    fontFamily: 'Arial',
                    fill: 'black'
                  });
                  aGroup.add(rectifierModuleName);
                  const children = aRectifierModule.getChildren();
                  const textAC = children[1];
                  const textDC = children[2];
                  if (textAC) {
                    // 调整 'AC' 文字的大小和位置
                    textAC.fontSize(20); // 设置字体大小为 20
                    textAC.x(textAC.x() + 10); // 向右移动 10 个单位
                    textAC.y(textAC.y() + 15);  // 向上移动 5 个单位
                  }
                  if (textDC) {
                    // 调整 'DC' 文字的大小和位置
                    textDC.fontSize(20); // 设置字体大小为 20
                    textDC.x(textDC.x()-25); // 向右移动 10 个单位
                    textDC.y(textDC.y() - 15);  // 向下移动 5 个单位
                  }
                  // 获取 aRectifierModule 的位置和尺寸信息
                  const aRectifierX = aRectifierModule.children[0].x();
                  const aRectifierY = aRectifierModule.children[0].y();
                  const aRectifierWidth = aRectifierModule.children[0].width();
                  const aRectifierHeight = aRectifierModule.children[0].height();
  
                  // 向下引申的线
                  const downLine = createLine(
                    aRectifierX + aRectifierWidth / 2, // 从矩形底部中间开始
                    aRectifierY + aRectifierHeight,
                    aRectifierX + aRectifierWidth / 2,
                    aRectifierY + aRectifierHeight + 50, // 向下延伸 50 像素
                    'black',
                    2,
                    'downLineFromRect'
                  );
                  // 右侧引申的线
                  const rightLine = createLine(
                    aRectifierX + aRectifierWidth, // 从矩形右侧中间开始
                    aRectifierY + aRectifierHeight / 2,
                    aRectifierX + aRectifierWidth + 50, // 向右延伸 50 像素
                    aRectifierY + aRectifierHeight / 2,
                    'black',
                    2,
                    'rightLineFromRect'
                  );
                  // 右侧引申线再向下延伸的线
                  const rightDownLine = createLine(
                    aRectifierX + aRectifierWidth + 50, // 从右侧引申线的末端开始
                    aRectifierY + aRectifierHeight / 2,
                    aRectifierX + aRectifierWidth + 50,
                    aRectifierY + aRectifierHeight + 50, // 向下延伸到和向下引申线相同的高度
                    'black',
                    2,
                    'rightDownLineFromRect'
                  );
                  //引申地线
                  const connectLine = createLine(
                    aRectifierX + aRectifierWidth / 2,
                    aRectifierY + aRectifierHeight + 50,
                    aRectifierX + aRectifierWidth + 50,
                    aRectifierY + aRectifierHeight + 50,
                    'black',
                    4,
                    'connectLine'
                  );
                  const lineMidX = (aRectifierX + aRectifierWidth / 2 + aRectifierX + aRectifierWidth + 50) / 2;
                  const lineMidY = aRectifierY + aRectifierHeight + 50;
                  const imageOnLine  = new Image();
                  imageOnLine.onload = () => {
                    const konvaImage = new Konva.Image({
                      x: lineMidX - 35, // 根据图片大小调整位置
                      y: lineMidY - 44, // 根据图片大小调整位置
                      image: imageOnLine,
                      width: 88, // 图片宽度
                      height: 88, // 图片高度
                      name: 'imageOnLine',
                    });
                    // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                    const whiteCover = new Konva.Rect({
                      x: lineMidX - 15,
                      y: lineMidY - 20,
                      width: 40,
                      height: 40,
                      fill: 'white'
                    });
                    // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                    aGroup.add(whiteCover);
                    aGroup.add(konvaImage);
                    layer.draw();
                  };
                  imageOnLine.src = require("@/assets/ground1.png");
                  aGroup.add(downLine);
                  aGroup.add(rightLine);
                  aGroup.add(rightDownLine);
                  aGroup.add(connectLine);
                  // aGroup.add(imageOnLine);
                  // A路汇聚终端
                  const imageAterm = new Image();
                  imageAterm.onload = () => {
                    // 图片加载完成后，更新 imagezongkai 变量
                    this.imageTerm = imageAterm;
                    const aTerminal = new Konva.Image({
                      x: xSpacing * 4 + dcScreenCabinetWidth - 35,
                      y: yStart + subComponentSpacing+subComponentHeight*2-15,
                      image: this.imageTerm, // 使用加载完成的图片对象
                      width: subComponentWidth*2,
                      height: subComponentHeight*2,
                      name: 'aTerminal',
                      // draggable:true
                    });
                    // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                    const whiteCover = new Konva.Rect({
                      x: xSpacing * 4 + dcScreenCabinetWidth - 35,
                      y: yStart + subComponentSpacing+subComponentHeight*2,
                      width: subComponentWidth * 2,
                      height: subComponentHeight * 2,
                      fill: 'white'
                    });
                    // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                    aGroup.add(whiteCover);
                    aGroup.add(aTerminal);
                    layer.draw();
                    this.stage.draw();
                  };
                  imageAterm.src = require("@/assets/openswitch.png");
                  // 创建一个 Konva.Text 对象来显示名称
                  const aTerminalName = new Konva.Text({
                    x: xSpacing * 4 + dcScreenCabinetWidth-35, // 与 aRectifierModule 相同的 x 坐标
                    y: yStart + subComponentSpacing+subComponentHeight+15, // 在 aRectifierModule 上方适当位置
                    text: 'DC 600A/2P', // 这里替换为你想要显示的实际名称
                    fontSize: 12,
                    fontFamily: 'Arial',
                    fill: 'black'
                  });
                  aGroup.add(aTerminalName);
                  // A路直流输出总开关
                  const imageAdcout = new Image();
                  imageAdcout.onload = () => {
                    // 图片加载完成后，更新 imagezongkai 变量
                    this.imagezongkai = imageAdcout;
                    const aDCOutputSwitch = new Konva.Image({
                      x: xSpacing * 5 + dcScreenCabinetWidth + 25,
                      y: yStart + subComponentSpacing+subComponentHeight*2-19,
                      image: this.imagezongkai, // 使用加载完成的图片对象
                      width: subComponentWidth*2,
                      height: subComponentHeight*2,
                      name: 'aDCOutputSwitch',
                      draggable:true
                    });
                    // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                    const whiteCover = new Konva.Rect({
                      x: xSpacing * 5 + dcScreenCabinetWidth + 28,
                      y: yStart + subComponentSpacing+subComponentHeight*2,
                      width: subComponentWidth * 2-5,
                      height: subComponentHeight,
                      fill: 'white'
                    });
                    // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                    aGroup.add(whiteCover);
                    aGroup.add(aDCOutputSwitch);
                    // 重新绘制 layer 和 stage
                    layer.draw();
                    this.stage.draw();
                  };
                  imageAdcout.src = require("@/assets/switch.png");
                  // 创建一个 Konva.Text 对象来显示名称
                  const aDCOutputSwitchName = new Konva.Text({
                    x: xSpacing * 5 + dcScreenCabinetWidth+25, // 与 aRectifierModule 相同的 x 坐标
                    y: yStart + subComponentSpacing+subComponentHeight*2-15, // 在 aRectifierModule 上方适当位置
                    text: 'DC 600A/2P', // 这里替换为你想要显示的实际名称
                    fontSize: 12,
                    fontFamily: 'Arial',
                    fill: 'black'
                  });
                  aGroup.add(aDCOutputSwitchName);
                  // 创建一个 Konva.Text 对象来显示名称
                  const aDCOutputSwitchNamea = new Konva.Text({
                    x: xSpacing * 5 + dcScreenCabinetWidth+subComponentWidth, // 与 aRectifierModule 相同的 x 坐标
                    y: yStart + subComponentSpacing+subComponentHeight*2+35, // 在 aRectifierModule 上方适当位置
                    text: 'QF',
                    fontSize: 12,
                    fontFamily: 'Arial',
                    fill: 'black'
                  });
                  aGroup.add(aDCOutputSwitchNamea);
                  //子开关之前的开关
                  const imageSplitswitch = new Image();
                  imageSplitswitch.onload = () => {
                    // 图片加载完成后，更新 imagezongkai 变量
                    this.imagezongkai = imageSplitswitch;
                    const aSplitSwitchImage = new Konva.Image({
                      x: xSpacing * 7 + dcScreenCabinetWidth + 30,
                      y: yStart+ subComponentSpacing+subComponentHeight*2-11,
                      image: this.imagezongkai, // 使用加载完成的图片对象
                      width: subComponentWidth*1.5,
                      height: subComponentHeight*1.5,
                      name: 'aSplitSwitchImage',
                      // rotation:-90,
                      // scaleX: -1  // 水平翻转
                    });
                    aGroup.add(aSplitSwitchImage);
                    // 重新绘制 layer 和 stage
                    layer.draw();
                    this.stage.draw();
                  };
                  imageSplitswitch.src = require("@/assets/device.png");
                  // 创建一个 Konva.Text 对象来显示名称
                  const aSplitSwitchImageName = new Konva.Text({
                    x: xSpacing * 7 + dcScreenCabinetWidth+25, // 与 aRectifierModule 相同的 x 坐标
                    y: yStart + subComponentSpacing+subComponentHeight*2-35, // 在 aRectifierModule 上方适当位置
                    text: '智能电量仪', // 这里替换为你想要显示的实际名称
                    fontSize: 12,
                    fontFamily: 'Arial',
                    fill: 'black'
                  });
                  aGroup.add(aSplitSwitchImageName);
                  //从此处开始缩放
                   // 与 verticalLineA 垂直的线，从 verticalLineA 中点向下延伸 100 像素
                   // 创建 A 路缩放相关组
                  const eGroup = new Konva.Group();
                   const verticalLineAMidX = xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 3;
                  const verticalLineAMidY = yStart + dcPowerCabinetHeight - inletWireHeight / 2;
                  const perpendicularLineA = createLine(
                    verticalLineAMidX,
                    verticalLineAMidY-this.Alist.branch.length*8,
                    verticalLineAMidX,
                    verticalLineAMidY + this.Alist.branch.length*47,
                    'green',
                    2,
                    'perpendicularLineA'
                  );
                  eGroup.add(perpendicularLineA);
                  //根据数组长度延伸对应条数的线
                  if(this.Alist.branch){
                    const branchLength = this.Alist.branch.length;
                    const verticalLineAEndX = xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 3;
                    const verticalLineAY = yStart + dcPowerCabinetHeight - inletWireHeight / 2-branchLength*3;
                    const lineSpacing = 50; // 引申线之间的间距
                    
                    const rectY = branchLength*60; // 计算条线占据高度
                    for (let i = 0; i < branchLength; i++) {
                      const newLine = createLine(
                        verticalLineAEndX,
                        verticalLineAY+ i * lineSpacing, 
                        verticalLineAEndX + 300, // 这里设置一个固定的延伸长度，你可以根据需要调整
                        verticalLineAY + i * lineSpacing,
                        'green',
                        1,
                        `rightExtendedLine${i}`
                      );
                      eGroup.add(newLine);
                      let imageSrc;
                      if (this.Alist.branch[i].status == "在线") {
                        imageSrc = require("@/assets/switch.png");
                      }else if(this.Alist.branch[i].status == "故障"){
                        imageSrc = require("@/assets/switch.png"); // 假设有关闭状态的图片
                      } else {
                        imageSrc = require("@/assets/switch.png"); // 假设有关闭状态的图片
                      }
                      const image = new Image();
                      image.onload = () => {
                        const lineImage = new Konva.Image({
                          x: verticalLineAEndX + 148, // 图片的 x 坐标，可以根据需要调整
                          y: verticalLineAY + i * lineSpacing - 25, // 图片的 y 坐标，可以根据需要调整
                          image: image,
                          width: subComponentWidth*1.5,
                          height: subComponentHeight*1.5,
                          name: `lineImage${i}`,
                        });
                        // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                        const whiteCoverA = new Konva.Rect({
                          x: verticalLineAEndX + 150,
                          y: verticalLineAY + i * lineSpacing - 25,
                          width: subComponentWidth * 1.5-5,
                          height: subComponentHeight * 1.5,
                          fill: 'white'
                        });
                        // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                        eGroup.add(whiteCoverA);
                        const textA = new Konva.Text({
                          x: verticalLineAEndX + 150, // 文字的 x 坐标，与图片 x 坐标相同
                          y: verticalLineAY + i * lineSpacing - 17 - 10, // 文字的 y 坐标，在图片上方适当位置
                          text: this.Alist.branch[i].deviceType, // 要显示的文字
                          fontSize: 12, // 文字大小
                          fill: 'black' // 文字颜色
                        });
                        const textA_1 = new Konva.Text({
                          x: verticalLineAEndX + 150, // 文字的 x 坐标，与图片 x 坐标相同
                          y: verticalLineAY + i * lineSpacing + 10, // 文字的 y 坐标，在图片上方适当位置
                          text: "QF", // 要显示的文字
                          fontSize: 8, // 文字大小
                          fill: 'black' // 文字颜色
                        });
                        eGroup.add(lineImage);
                        aGroup.add(eGroup);
                        eGroup.add(textA); // 将文字添加到 eGroup 中
                        eGroup.add(textA_1);
                        layer.draw();
                        this.stage.draw();
                      };
                      image.src = imageSrc;
                       // 创建表格
                      const tableWidth = 420; // 表格宽度
                      const tableHeight = this.Alist.branch.length * 20; // 根据 A 路分支数量动态设置表格高度
                      const tableX = verticalLineAEndX + 300; // 表格的 x 坐标，放置在线的末端
                      const tableY = verticalLineAY-70; // 表格的 y 坐标
                      // / 表格的行数和列数
                      const rows = this.Alist.branch.length+1; // 行数根据 A 路分支数量确定
                      const cols = 6;
                      // 单元格的宽度和高度
                      const cellWidth = tableWidth / cols;
                      const cellHeight = 50; // 固定单元格高度
                      // 创建一个组来管理表格元素
                      const tableGroup = new Konva.Group();
                      // 第一行（表头）
                      for (let col = 0; col < cols; col++) {
                        const cellX = tableX + col * cellWidth;
                        const cellY = tableY;
                        // 创建表头单元格边框（矩形）
                        const cellRect = new Konva.Rect({
                          x: cellX,
                          y: cellY,
                          width: cellWidth,
                          height: cellHeight,
                          stroke: 'black',
                          strokeWidth: 1,
                          name: `tableCellRect_0_${col}`
                        });
                        // 表头的文本内容
                        let cellTextContent = '';
                        if (col === 0) {
                          cellTextContent = '设备编号';
                        } else if (col === 1) {
                          cellTextContent = '设备名称';
                        }else if (col === 2) {
                          cellTextContent = '电压';
                        }else if (col === 3) {
                          cellTextContent = '电流';
                        }else if (col === 4) {
                          cellTextContent = '功率';
                        }else if (col === 5) {
                          cellTextContent = '状态';
                        }
                        // 创建表头单元格中的文本
                        const cellText = new Konva.Text({
                          x: cellX,
                          y: cellY + 5,
                          text: cellTextContent,
                          fontSize: 10,
                          fontFamily: 'Arial',
                          fill: 'black',
                          align: 'center', // 水平居中
                          textAlign: 'center', // 文本内容水平居中
                          verticalAlign: 'middle', // 垂直居中
                          width: cellWidth, // 设置文本宽度与单元格宽度相同
                          height: cellHeight, // 设置文本高度与单元格高度相同
                          name: `tableCellText_0_${col}`
                        });
                        tableGroup.add(cellRect);
                        tableGroup.add(cellText);
                      }
                      // 从第二行开始填充数据
                      this.Alist.branch.forEach((branch, row) => {
                        for (let col = 0; col < cols; col++) {
                          const cellX = tableX + col * cellWidth;
                          const cellY = tableY + (row + 1) * cellHeight; // 注意这里的 row + 1，因为表头占了第一行
                          // 创建单元格边框（矩形）
                          const cellRect = new Konva.Rect({
                            x: cellX,
                            y: cellY,
                            width: cellWidth,
                            height: cellHeight,
                            stroke: 'black',
                            strokeWidth: 1,
                            name: `tableCellRect_${row + 1}_${col}`
                          });
                          // 根据列数填充不同的数据
                          let cellTextContent = '';
                          if (col === 0) {
                            cellTextContent = branch.deviceId;
                          } else if (col === 1) {
                            cellTextContent = branch.deviceName;
                          }else if (col === 2) {
                            cellTextContent = branch.avoltage;
                          }else if (col === 3) {
                            cellTextContent = branch.acurrent;
                          }else if (col === 4) {
                            cellTextContent = branch.apower;
                          }else if (col === 5) {
                            cellTextContent = branch.status;
                          }
                          // 创建单元格中的文本
                          const cellText = new Konva.Text({
                            x: cellX,
                            y: cellY + 5,
                            text: cellTextContent,
                            fontSize: 10,
                            fontFamily: 'Arial',
                            fill: 'black',
                            align: 'center', // 水平居中
                            textAlign: 'center', // 文本内容水平居中
                            verticalAlign: 'middle', // 垂直居中
                            width: cellWidth, // 设置文本宽度与单元格宽度相同
                            height: cellHeight, // 设置文本高度与单元格高度相同
                            name: `tableCellText_${row + 1}_${col}`,
                            fontWeight: 'normal'
                          });
                          tableGroup.add(cellRect);
                          tableGroup.add(cellText);
                        }
                      });
                      eGroup.add(tableGroup);
                      // 限制矩形框在A路的50%高度内
                      this.halfHeightA = this.stage.height() / 2-30;
                      if (rectY > this.halfHeightA) {
                        if(this.Alist.branch.length<10){ 
                          this.scaleAgroup = this.halfHeightA / rectY;
                          eGroup.scale({ x: 1, y: this.scaleAgroup });
                        }else if(this.Alist.branch.length >=10 && this.Alist.branch.length<15){ 
                          this.scaleAgroup = this.halfHeightA / rectY+0.03;
                          eGroup.scale({ x: 1, y: this.scaleAgroup });
                        }else if(this.Alist.branch.length >=15 && this.Alist.branch.length<20){
                            this.scaleAgroup = this.halfHeightA / rectY+0.05;
                            eGroup.scale({ x: 1, y: this.scaleAgroup});
                        }else if(this.Alist.branch.length >=20 && this.Alist.branch.length<25){
                            this.scaleAgroup = this.halfHeightA / rectY+0.05;
                            eGroup.scale({ x: 1, y: this.scaleAgroup});
                        }else{
                            this.scaleAgroup = this.halfHeightA / rectY+0.04;
                            eGroup.scale({ x: 1, y: this.scaleAgroup});
                        }
                      }                  
                    }
                  }
                  // 将 aGroup 添加到 mainGroup 中
                  mainGroup.add(aGroup);
                  mainGroup.add(cGroup);
                  aGroup.moveToTop();
                  layer.draw();
                  this.stage.draw();
                }
                
                if (this.Blist) {
                  // 创建 B 路相关元素的组
                  const bGroup = new Konva.Group();
                  // 绘制进电线 B 路
                  const inletWireCircleB = createCircle(
                    xSpacing / 2,
                    this.stage.height() / 2 + 50 + (dcPowerCabinetHeight - inletWireHeight) / 2,
                    inletWireWidth / 2,
                    'blue',
                    'inletWireCircleB'
                  );
                  bGroup.add(inletWireCircleB);
                  const inletWireB = createArrow(
                    xSpacing / 2,
                    this.stage.height() / 2 + 50 + (dcPowerCabinetHeight - inletWireHeight) / 2 + inletWireWidth / 2,
                    inletWireHeight - inletWireWidth,
                    'blue',
                    'inletWireB'
                  );
                  bGroup.add(inletWireB);
                  // B路与箭头垂直的线
                  const verticalLineB_1 = createLine(
                    xSpacing / 2,
                    this.stage.height() / 2 + 50 + dcPowerCabinetHeight - inletWireHeight / 2,
                    xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 2,
                    this.stage.height() / 2 + 50 + dcPowerCabinetHeight - inletWireHeight / 2,
                    'blue',
                    3,
                    'verticalLineB_1'
                  );
                  // 后半段线，宽度设置为1
                  const verticalLineB_2 = createLine(
                    xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 2,
                    this.stage.height() / 2 + 50 + dcPowerCabinetHeight - inletWireHeight / 2,
                    // 这里需要根据实际情况修改终点坐标，假设终点横坐标再增加100
                    xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 3, 
                    this.stage.height() / 2 + 50 + dcPowerCabinetHeight - inletWireHeight / 2,
                    'blue',
                    1,
                    'verticalLineB_2'
                  );
                  const dGroup = new Konva.Group();
                  dGroup.add(verticalLineB_1);
                  dGroup.add(verticalLineB_2)
                  // B路总开关
                  const imageBMainswitch = new Image();
                  imageBMainswitch.onload = () => {
                    // 图片加载完成后，更新 imagezongkai 变量
                    this.imagezongkai = imageBMainswitch;
                    const bMainSwitchImage = new Konva.Image({
                      x: xSpacing + subComponentSpacing,
                      y: this.stage.height() / 2 + 50 + subComponentSpacing + subComponentHeight*2-15,
                      image: this.imagezongkai, // 使用加载完成的图片对象
                      width: subComponentWidth*2,
                      height: subComponentHeight*2,
                      name: 'bMainSwitchImage',
                    });
                    // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                    const whiteCover = new Konva.Rect({
                      x: xSpacing + subComponentSpacing,
                      y: this.stage.height() / 2 + 50 + subComponentSpacing + subComponentHeight*2-15,
                      width: subComponentWidth * 2,
                      height: subComponentHeight * 2,
                      fill: 'white'
                    });
                    // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                    bGroup.add(whiteCover);
                    bGroup.add(bMainSwitchImage);
                    // 重新绘制 layer 和 stage
                    layer.draw();
                    this.stage.draw();
                  };
                  imageBMainswitch.src = require("@/assets/openswitch.png");
                  // 创建一个 Konva.Text 对象来显示开关名称
                  const switchNameText = new Konva.Text({
                    x: xSpacing + subComponentSpacing,
                    y: this.stage.height() / 2 + 50 + subComponentSpacing + subComponentHeight*2-25, // 在开关上方显示
                    text: '100A/3P',
                    fontSize: 12,
                    fontFamily: 'Arial',
                    fill: 'black'
                  });
                  bGroup.add(switchNameText); 
                  //B路AC/DC
                  const bRectifierModule = createRectAndText(
                    xSpacing + subComponentSpacing*5 + subComponentWidth*2,
                    this.stage.height() / 2 + 50 + dcPowerCabinetHeight - dcScreenCabinetHeight + subComponentSpacing,
                    dcPowerACDCWidth,
                    dcPowerACDCHeight,
                    'white',
                    'AC',
                    'DC',
                    'bRectifierModule'
                  );
                  bGroup.add(bRectifierModule);
                  // 创建一个 Konva.Text 对象来显示开关名称
                  const bRectifierModuleNameText = new Konva.Text({
                    x: xSpacing + subComponentSpacing*5 + subComponentWidth*2,
                    y: this.stage.height() / 2 + 50 +dcPowerCabinetHeight - dcScreenCabinetHeight + subComponentSpacing-20, // 在开关上方显示
                    text: '48/600A直流电源',
                    fontSize: 12,
                    fontFamily: 'Arial',
                    fill: 'black'
                  });
                  bGroup.add(bRectifierModuleNameText); 
                  const children = bRectifierModule.getChildren();
                  const textAC = children[1];
                  const textDC = children[2];
                  if (textAC) {
                    // 调整 'AC' 文字的大小和位置
                    textAC.fontSize(20); // 设置字体大小为 20
                    textAC.x(textAC.x() + 10); // 向右移动 10 个单位
                    textAC.y(textAC.y() + 15);  // 向上移动 5 个单位
                  }
                  if (textDC) {
                    // 调整 'DC' 文字的大小和位置
                    textDC.fontSize(20); // 设置字体大小为 20
                    textDC.x(textDC.x()-25); // 向右移动 10 个单位
                    textDC.y(textDC.y() - 15);  // 向下移动 5 个单位
                  }
                  // 获取 bRectifierModule 的位置和尺寸信息
                  const bRectifierX = bRectifierModule.children[0].x();
                  const bRectifierY = bRectifierModule.children[0].y();
                  const bRectifierWidth = bRectifierModule.children[0].width();
                  const bRectifierHeight = bRectifierModule.children[0].height();
                  // 向下引申的线
                  const downLine = createLine(
                    bRectifierX + bRectifierWidth / 2, // 从矩形底部中间开始
                    bRectifierY + bRectifierHeight,
                    bRectifierX + bRectifierWidth / 2,
                    bRectifierY + bRectifierHeight + 50, // 向下延伸 50 像素
                    'black',
                    2,
                    'downLineFromRect'
                  );
                  // 右侧引申的线
                  const rightLine = createLine(
                    bRectifierX + bRectifierWidth, // 从矩形右侧中间开始
                    bRectifierY + bRectifierHeight / 2,
                    bRectifierX + bRectifierWidth + 50, // 向右延伸 50 像素
                    bRectifierY + bRectifierHeight / 2,
                    'black',
                    2,
                    'rightLineFromRect'
                  );
                  // 右侧引申线再向下延伸的线
                  const rightDownLine = createLine(
                    bRectifierX + bRectifierWidth + 50, // 从右侧引申线的末端开始
                    bRectifierY + bRectifierHeight / 2,
                    bRectifierX + bRectifierWidth + 50,
                    bRectifierY + bRectifierHeight + 50, // 向下延伸到和向下引申线相同的高度
                    'black',
                    2,
                    'rightDownLineFromRect'
                  );
                  //引申地线
                  const connectLine = createLine(
                    bRectifierX + bRectifierWidth / 2,
                    bRectifierY + bRectifierHeight + 50,
                    bRectifierX + bRectifierWidth + 50,
                    bRectifierY + bRectifierHeight + 50,
                    'black',
                    4,
                    'connectLine'
                  );
                  const lineMidX = (bRectifierX + bRectifierWidth / 2 + bRectifierX + bRectifierWidth + 50) / 2;
                  const lineMidY = bRectifierY + bRectifierHeight + 50;
                  const imageOnLine  = new Image();
                  imageOnLine.onload = () => {
                    const konvaImage = new Konva.Image({
                      x: lineMidX -35, // 根据图片大小调整位置
                      y: lineMidY - 44, // 根据图片大小调整位置
                      image: imageOnLine,
                      width: 88, // 图片宽度
                      height: 88, // 图片高度
                      name: 'imageOnLine',
                      // rotation:90
                    });
                    // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                    const whiteCover = new Konva.Rect({
                      x: lineMidX - 15,
                      y: lineMidY - 20,
                      width: 40,
                      height: 40,
                      fill: 'white'
                    });
                    // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                    bGroup.add(whiteCover);
                    bGroup.add(konvaImage);
                    layer.draw();
                  };
                  imageOnLine.src = require("@/assets/ground1.png");
                  bGroup.add(downLine);
                  bGroup.add(rightLine);
                  bGroup.add(rightDownLine);
                  bGroup.add(connectLine);
  
                  // B路汇聚终端
                  const imageBterm = new Image();
                  imageBterm.onload = () => {
                    this.imageBterm = imageBterm;
                    const bTerminal = new Konva.Image({
                      x: xSpacing * 4 + dcScreenCabinetWidth - 35,
                      y: this.stage.height() / 2+ 50 + subComponentSpacing+subComponentHeight+20,
                      image: this.imageBterm, // 使用加载完成的图片对象
                      width: subComponentWidth*2,
                      height: subComponentHeight*2,
                      name: 'bTerminal',
                      draggable:true
                    });
                    // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                    const whiteCover = new Konva.Rect({
                      x: xSpacing * 4 + dcScreenCabinetWidth-35,
                      y: this.stage.height() / 2+ 50 + subComponentSpacing+subComponentHeight+20,
                      width: subComponentWidth*2,
                      height: subComponentHeight*2,
                      fill: 'white'
                    });
                    // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                    bGroup.add(whiteCover);
                    bGroup.add(bTerminal);
                    layer.draw();
                    this.stage.draw();
                  };
                  imageBterm.src = require("@/assets/openswitch.png");
                  // 创建一个 Konva.Text 对象来显示开关名称
                  const bTerminalNameText = new Konva.Text({
                    x: xSpacing * 4 + dcScreenCabinetWidth-35,
                    y: this.stage.height() / 2 + 50 +subComponentSpacing+subComponentHeight+10, // 在开关上方显示
                    text: 'DC 600A/2P',
                    fontSize: 12,
                    fontFamily: 'Arial',
                    fill: 'black'
                  });
                  bGroup.add(bTerminalNameText); 
                  // B路直流输出总开关
                  const imageBdcout = new Image();
                  imageBdcout.onload = () => {
                    this.imageBdcout = imageBdcout;
                    const bDCOutputSwitch = new Konva.Image({
                      x: xSpacing * 5 + dcScreenCabinetWidth + 21,
                      y: this.stage.height() / 2 + 50 + subComponentSpacing+subComponentHeight*2-18,
                      image: this.imageBdcout, // 使用加载完成的图片对象
                      width: subComponentWidth*2,
                      height: subComponentHeight*2,
                      name: 'bDCOutputSwitch',
                      draggable:true
                    });
                    // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                    const whiteCover = new Konva.Rect({
                      x: xSpacing * 5 + dcScreenCabinetWidth + 24,
                      y: this.stage.height() / 2+ 50 + subComponentSpacing+subComponentHeight*2-10,
                      width: subComponentWidth*2-5,
                      height: subComponentHeight,
                      fill: 'white'
                    });
                    // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                    bGroup.add(whiteCover);
                    bGroup.add(bDCOutputSwitch);
                    // 重新绘制 layer 和 stage
                    layer.draw();
                    this.stage.draw();
                  };
                  imageBdcout.src = require("@/assets/switch.png");
                  // 创建一个 Konva.Text 对象来显示开关名称
                  const bDCOutputSwitchNameText = new Konva.Text({
                    x: xSpacing * 5 + dcScreenCabinetWidth + 17,
                    y: this.stage.height() / 2 + 50 +subComponentSpacing+subComponentHeight*2-20, // 在开关上方显示
                    text: 'DC 600A/2P',
                    fontSize: 12,
                    fontFamily: 'Arial',
                    fill: 'black'
                  });
                  bGroup.add(bDCOutputSwitchNameText);
                  // 创建一个 Konva.Text 对象来显示名称
                  const bDCOutputSwitchNameTexta = new Konva.Text({
                    x: xSpacing * 5 + dcScreenCabinetWidth+subComponentWidth, // 与 aRectifierModule 相同的 x 坐标
                    y: this.stage.height() / 2 + 50 +subComponentSpacing+subComponentHeight*2+35, // 在 aRectifierModule 上方适当位置
                    text: 'QF',
                    fontSize: 12,
                    fontFamily: 'Arial',
                    fill: 'black'
                  });
                  bGroup.add(bDCOutputSwitchNameTexta);  
                  //子开关之前的开关
                  const imageSplitswitch = new Image();
                  imageSplitswitch.onload = () => {
                    // 图片加载完成后，更新 imagezongkai 变量
                    this.imagezongkai = imageSplitswitch;
                    const bSplitSwitchImage = new Konva.Image({
                      x: xSpacing * 7 + dcScreenCabinetWidth + 30,
                      y: this.stage.height() / 2 + 50+ subComponentSpacing+subComponentHeight*2-11,
                      image: this.imagezongkai, // 使用加载完成的图片对象
                      width: subComponentWidth*1.5,
                      height: subComponentHeight*1.5,
                      name: 'bSplitSwitchImage',
                    });
                    bGroup.add(bSplitSwitchImage);
                    // 重新绘制 layer 和 stage
                    layer.draw();
                    this.stage.draw();
                  };
                  imageSplitswitch.src = require("@/assets/device.png"); 
                  // 创建一个 Konva.Text 对象来显示开关名称
                  const bSplitSwitchImageNameText = new Konva.Text({
                    x: xSpacing * 7 + dcScreenCabinetWidth + 30,
                    y: this.stage.height() / 2 + 50 +subComponentSpacing+subComponentHeight*2-35, // 在开关上方显示
                    text: '智能电量仪',
                    fontSize: 12,
                    fontFamily: 'Arial',
                    fill: 'black'
                  });
                  bGroup.add(bSplitSwitchImageNameText);  
                 // 与 verticalLineB 垂直的线，从 verticalLineB 中点向下延伸 100 像素 
                 // 创建 B 路缩放相关组
                 const fGroup = new Konva.Group();
                 const verticalLineAMidX = xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 3;
                  const verticalLineAMidY = this.stage.height() / 2 + 50 + dcPowerCabinetHeight - inletWireHeight / 2;
                  const perpendicularLineB = createLine(
                    verticalLineAMidX,
                    verticalLineAMidY-this.Blist.branch.length*8,
                    verticalLineAMidX,
                    verticalLineAMidY + this.Blist.branch.length*47,
                    'blue',
                    2,
                    'perpendicularLineB'
                  );
                  fGroup.add(perpendicularLineB);   
                  //根据数组长度延伸对应条数的线
                  if(this.Blist.branch){
                    const branchLength = this.Blist.branch.length;
                    const verticalLineAEndX = xSpacing / 2 + dcScreenCabinetWidth + dcPowerCabinetWidth * 3;
                    const verticalLineAY = this.stage.height() / 2 + 50 + dcPowerCabinetHeight - inletWireHeight / 2-branchLength*3;
                    const lineSpacing = 50; // 引申线之间的间距
                    const rectY = branchLength*60; // 计算条线占据高度
                    let totalScaleY = 1; // 用于记录总的缩放比例
                    for (let i = 0; i < branchLength; i++) {
                      const newLine = createLine(
                        verticalLineAEndX,
                        verticalLineAY+ i * lineSpacing, 
                        verticalLineAEndX + 300, // 这里设置一个固定的延伸长度，你可以根据需要调整
                        verticalLineAY + i * lineSpacing,
                        'blue',
                        1,
                        `rightExtendedLine${i}`
                      );
                      fGroup.add(newLine);
                      let imageSrc;
                      if (this.Blist.branch[i].status == "在线") {
                        imageSrc = require("@/assets/switch.png");
                      }else if(this.Blist.branch[i].status == "故障"){
                        imageSrc = require("@/assets/switch.png"); // 假设有关闭状态的图片
                      } else {
                        imageSrc = require("@/assets/switch.png"); // 假设有关闭状态的图片
                      }
                      const image = new Image();
                      image.onload = () => {
                        const lineImage = new Konva.Image({
                          x: verticalLineAEndX + 148, // 图片的 x 坐标，可以根据需要调整
                          y: verticalLineAY + i * lineSpacing - 25, // 图片的 y 坐标，可以根据需要调整
                          image: image,
                          width: subComponentWidth*1.5,
                          height: subComponentHeight*1.5,
                          name: `lineImage${i}`,
                        });
                        // 创建一个白色矩形，与图片同样的位置和大小，用于遮盖下面的线
                        const whiteCoverB = new Konva.Rect({
                          x: verticalLineAEndX + 150,
                          y: verticalLineAY + i * lineSpacing - 16,
                          width: subComponentWidth * 1.5-5,
                          height: subComponentHeight * 1.5,
                          fill: 'white'
                        });
                        // 先添加白色矩形，再添加图片，确保图片在白色矩形之上
                        fGroup.add(whiteCoverB);
                        const textB = new Konva.Text({
                          x: verticalLineAEndX + 150, // 文字的 x 坐标，与图片 x 坐标相同
                          y: verticalLineAY + i * lineSpacing - 17 - 10, // 文字的 y 坐标，在图片上方适当位置
                          text: this.Blist.branch[i].deviceType, // 要显示的文字
                          fontSize: 12, // 文字大小
                          fill: 'black' // 文字颜色
                        });
                        const textB_1 = new Konva.Text({
                          x: verticalLineAEndX + 150, // 文字的 x 坐标，与图片 x 坐标相同
                          y: verticalLineAY + i * lineSpacing + 10, // 文字的 y 坐标，在图片上方适当位置
                          text: "QF", // 要显示的文字
                          fontSize: 8, // 文字大小
                          fill: 'black' // 文字颜色
                        });
                        fGroup.add(lineImage);
                        fGroup.add(textB);
                        fGroup.add(textB_1);
                        bGroup.add(fGroup);
                        layer.draw();
                        this.stage.draw();
                      };
                      image.src = imageSrc;
                       // 创建表格
                      const tableWidth = 420; // 表格宽度
                      const tableHeight = this.Blist.branch.length * 20; // 根据 A 路分支数量动态设置表格高度
                      const tableX = verticalLineAEndX + 300; // 表格的 x 坐标，放置在线的末端
                      const tableY = verticalLineAY-70; // 表格的 y 坐标
                      // / 表格的行数和列数
                      const rows = this.Blist.branch.length+1; // 行数根据 A 路分支数量确定
                      const cols = 6;
                      // 单元格的宽度和高度
                      const cellWidth = tableWidth / cols;
                      const cellHeight = 50; // 固定单元格高度
                      // 创建一个组来管理表格元素
                      const tableGroup = new Konva.Group();
                      // 第一行（表头）
                      for (let col = 0; col < cols; col++) {
                        const cellX = tableX + col * cellWidth;
                        const cellY = tableY;
                        // 创建表头单元格边框（矩形）
                        const cellRect = new Konva.Rect({
                          x: cellX,
                          y: cellY,
                          width: cellWidth,
                          height: cellHeight,
                          stroke: 'black',
                          strokeWidth: 1,
                          name: `tableCellRect_0_${col}`
                        });
                        // 表头的文本内容
                        let cellTextContent = '';
                        if (col === 0) {
                          cellTextContent = '设备编号';
                        } else if (col === 1) {
                          cellTextContent = '设备名称';
                        }else if (col === 2) {
                            cellTextContent = '电压';
                          }else if (col === 3) {
                            cellTextContent = '电流';
                          }else if (col === 4) {
                            cellTextContent = '功率';
                          }else if (col === 5) {
                            cellTextContent = '状态';
                          }
                        // 创建表头单元格中的文本
                        const cellText = new Konva.Text({
                          x: cellX + 5,
                          y: cellY + 5,
                          text: cellTextContent,
                          fontSize: 10,
                          fontFamily: 'Arial',
                          fill: 'black',
                          align: 'center', // 水平居中
                          textAlign: 'center', // 文本内容水平居中
                          verticalAlign: 'middle', // 垂直居中
                          width: cellWidth, // 设置文本宽度与单元格宽度相同
                          height: cellHeight, // 设置文本高度与单元格高度相同
                          name: `tableCellText_0_${col}`
                        });
                        tableGroup.add(cellRect);
                        tableGroup.add(cellText);
                      }
                      // 从第二行开始填充数据
                      this.Blist.branch.forEach((branch, row) => {
                        for (let col = 0; col < cols; col++) {
                          const cellX = tableX + col * cellWidth;
                          const cellY = tableY + (row + 1) * cellHeight; // 注意这里的 row + 1，因为表头占了第一行
                          // 创建单元格边框（矩形）
                          const cellRect = new Konva.Rect({
                            x: cellX,
                            y: cellY,
                            width: cellWidth,
                            height: cellHeight,
                            stroke: 'black',
                            strokeWidth: 1,
                            name: `tableCellRect_${row + 1}_${col}`
                          });
                          // 根据列数填充不同的数据
                          let cellTextContent = '';
                          if (col === 0) {
                            cellTextContent = branch.deviceId;
                          } else if (col === 1) {
                            cellTextContent = branch.deviceName;
                          }else if (col === 2) {
                            cellTextContent = branch.avoltage;
                          }else if (col === 3) {
                            cellTextContent = branch.acurrent;
                          }else if (col === 4) {
                            cellTextContent = branch.apower;
                          }else if (col === 5) {
                            cellTextContent = branch.status;
                          }
                          // 创建单元格中的文本
                          const cellText = new Konva.Text({
                            x: cellX,
                            y: cellY + 5,
                            text: cellTextContent,
                            fontSize: 10,
                            fontFamily: 'Arial',
                            fill: 'black',
                            align: 'center', // 水平居中
                            textAlign: 'center', // 文本内容水平居中
                            verticalAlign: 'middle', // 垂直居中
                            width: cellWidth, // 设置文本宽度与单元格宽度相同
                            height: cellHeight, // 设置文本高度与单元格高度相同
                            name: `tableCellText_${row + 1}_${col}`
                          });
                          tableGroup.add(cellRect);
                          tableGroup.add(cellText);
                        }
                      });
                      fGroup.add(tableGroup);
                      // 限制矩形框在B路的50%高度内
                      this.halfHeightB = this.stage.height() / 2+10; // 计算每路的高度（除去配电柜高度）
                      if (rectY > this.halfHeightB) {
                        const scaleBgroup = this.halfHeightB / rectY;
                        totalScaleY *= scaleBgroup; // 累积缩放比例
                        // 调整 bGroup 和 dGroup 的位置和缩放
                        const newY = this.halfHeightB - rectY * totalScaleY;
                        // 确保 newY 不会导致元素移出可视区域
                        const minY = 0; // 最小 y 坐标
                        const finalY = Math.max(minY, newY);
                        fGroup.y(finalY); // 调整 y 坐标以防止往上跑
                        fGroup.scale({ x: 1, y: totalScaleY });
                        // 确保缩放比例不会过小
                        const minScale = 0.1; // 最小缩放比例
                        if (totalScaleY <= this.scaleAgroup) {
                          totalScaleY = this.scaleAgroup;
                          // bGroup.scale({ x: 1, y: totalScaleY });
                          fGroup.scale({ x: 1, y: totalScaleY });
                        }
                      }else{
                        const scaleBgroup = this.halfHeightB / rectY;
                        totalScaleY *= scaleBgroup; // 累积缩放比例
                        // 调整 bGroup 和 dGroup 的位置和缩放
                        const newY = this.halfHeightB - rectY * totalScaleY;
                        // 确保 newY 不会导致元素移出可视区域
                        const minY = 0; // 最小 y 坐标
                        const finalY = Math.max(minY, newY);
                        fGroup.y(finalY); // 调整 y 坐标以防止往上跑
                        fGroup.scale({ x: 1, y: totalScaleY });
                        // 确保缩放比例不会过小
                        const minScale = 0.1; // 最小缩放比例
                        if (totalScaleY > this.scaleAgroup) {
                          if(this.scaleAgroup==0){
                            totalScaleY = 1;
                          }else{
                            totalScaleY = this.scaleAgroup;
                          }
                          // bGroup.scale({ x: 1, y: totalScaleY });
                          fGroup.scale({ x: 1, y: totalScaleY });
                        }
                        
                      }
                    }
                  }                
                  // 将 bGroup 添加到 mainGroup 中
                  mainGroup.add(bGroup);
                  mainGroup.add(dGroup);
                  bGroup.moveToTop();
                  layer.draw();
                  this.stage.draw();
                }
                layer.add(mainGroup);
              this.stage.add(layer);
            layer.draw();
            this.stage.draw();
            // 鼠标按下事件
            this.stage.on('mousedown touchstart', (e) => {
              this.isDragging = true;
              this.lastPointerPos = this.stage.getPointerPosition();
            });
  
            // 鼠标移动事件
            this.stage.on('mousemove touchmove', (e) => {
              if (!this.isDragging) return;
              const pos = this.stage.getPointerPosition();
              const dx = pos.x - this.lastPointerPos.x;
              const dy = pos.y - this.lastPointerPos.y;
              this.stage.position({
                x: this.stage.position().x + dx,
                y: this.stage.position().y + dy
              });
              this.lastPointerPos = pos;
              this.stage.batchDraw();
            });
            // 鼠标抬起事件
            this.stage.on('mouseup touchend', () => {
              this.isDragging = false;
            });
            this.stage.on('wheel', (evt) => {
                const oldScale = this.stage.scaleX();
                const pointer = this.stage.getPointerPosition();
                const scaleBy = 1.1; // 缩放比例，1.1 表示每次缩放增加10%
                const mousePointTo = {
                  x: (pointer.x - this.stage.x()) / oldScale,
                  y: (pointer.y - this.stage.y()) / oldScale,
                }; // 将鼠标指针相对于画布的位置转换为相对于缩放后的画布位置
                const newScale = evt.evt.deltaY < 0 ? oldScale * scaleBy : oldScale / scaleBy; // 根据滚轮方向决定是放大还是缩小
                this.stage.scale({ x: newScale, y: newScale }); // 应用新的缩放比例
                this.stage.position({ // 保持鼠标指针在缩放后的位置上不变
                  x: pointer.x - mousePointTo.x * newScale,
                  y: pointer.y - mousePointTo.y * newScale,
                });
                this.stage.batchDraw(); // 刷新舞台以显示新的缩放状态
              });
            })
          }).catch(() => {
            // this.loading = false;
          });
        }
      }
    }
  </script>
  <style lang="scss" scoped>
  .top{
    width: 100%;
      height: 63px;
     display: flex;
      font-size: 14px;
      justify-content: space-between;
        .top_left{
            width: 300px;
            height: 63px;
            line-height: 63px;
            .textA{
              font-weight: 400;
              color: #7E7E7E;
              margin-right: 5px;
            }
            .textB{
              font-weight: 400;
              color: #3579F6;
              margin-left: 5px;
            }
          }
        .top_right{
            width: 200px;
            height: 63px;
            display: flex;
            font-size: 20px;
            .box_A{
              width: 54px;
              height: 32px;
              margin: 15px 10px 0 0;
              line-height: 32px;
              text-align: center;
              background: #67CD78;
              border-radius: 2px;
            }
            .box_B{
              width: 54px;
              height: 32px;
              line-height: 32px;
              text-align: center;
              margin-top: 15px;
              background: #1B6BFF;
              border-radius: 2px;
              margin-top: 15px;
            }
      }
  }
  #scroll-container {
    /* 设置为可滚动 */
    overflow: auto;
    width: 100% !important;
    height: 820px !important;
    // background-color: #7E7E7E;
  }
  .bottom{
    width: 100% !important;
    height: 800px !important; 
    // background-color: aquamarine; 
  }
  </style>